<style>
  .routine-container {
    align-items: center;
    display: flex;
    height: 20px;
    margin: 5px;
    padding: 5px;
  }
  .routine-icon {
    height: 25px;
    width: auto;
  }
  .routine-name {
    flex: 1;
    font-size: 0.8rem;
    padding-inline-start: 10px;
  }
</style>

<network-health-container expanded="[[expanded]]" label="[[name]]"
    on-toggle-expanded="onToggleExpanded_">
  <span slot="header" >
    <template is="dom-if" if="[[running_]]">
      <paper-spinner-lite active></paper-spinner-lite>
    </template>
    <img class="routine-icon" hidden="[[!showGroupIcon_]]"
        src="[[getGroupIcon_(routines.*)]]">
  </span>
  <template is="dom-repeat" items="[[routines]]" as="routine"
      mutable-data>
    <div class="routine-container" aria-label="[[i18n(routine.name)]]"
        aria-description="[[routine.ariaDescription]]">
      <img class="routine-icon" src="[[getRoutineIcon_(routine.result)]]">
      <div aria-hidden="true" class="routine-name">
        [[i18n(routine.name)]]
      </div>
      <div id="result-msg" aria-hidden="true" hidden="[[!routine.resultMsg]]">
        [[routine.resultMsg]]
      </div>
    </div>
  </template>
</network-health-container>

